<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="交易记录">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="商品名称">
                <a-input
                  v-model:value="formState.goodName"
                  placeholder="输入商品名称关键词"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="商品编号">
                <a-input
                  v-model:value="formState.goodSku"
                  placeholder="输入商品编号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="订单编号">
                <a-input
                  v-model:value="formState.orderNo"
                  placeholder="输入订单编号"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="订单状态">
                <a-select
                  ref="select"
                  placeholder="订单状态"
                  v-model:value="formState.orderState"
                >
                  <a-select-option :value="0">全部</a-select-option
                  ><a-select-option
                    v-for="item in orderStateEnum.data"
                    :value="item.value"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="入账状态">
                <a-select
                  ref="select"
                  placeholder="入账状态"
                  v-model:value="formState.shopInState"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">未入账</a-select-option>
                  <a-select-option :value="2">已入帐</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="支付时间">
                <a-range-picker
                  style="width: 100%"
                  v-model:value="dateTime"
                  @change="onChangeTime"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="but-layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>
      <a-card>
        <div class="card-content flex">
          <div v-if="statisticsData.totalRecordedAmountDto">
            <h3>总营业额</h3>
            <h4>{{statisticsData.totalRecordedAmountDto.amount}}</h4>
            <h5>订单数量：{{statisticsData.totalRecordedAmountDto.total}}</h5>
          </div>
          <div v-if="statisticsData.refundRecordedAmountDto">
            <h3>售后/退款</h3>
            <h4>{{statisticsData.refundRecordedAmountDto.amount}}</h4>
            <h5>订单数量{{statisticsData.refundRecordedAmountDto.total}}</h5>
          </div>
          <div v-if="statisticsData.enteredRecordedAmountDto">
            <h3>已入账</h3>
            <h4>{{statisticsData.enteredRecordedAmountDto.amount}}</h4>
            <h5>订单数量：{{statisticsData.enteredRecordedAmountDto.total}}</h5>
          </div>
          <div v-if="statisticsData.notEnteredRecordedAmountDto">
            <h3>未入账</h3>
            <h4>{{statisticsData.notEnteredRecordedAmountDto.amount}}</h4>
            <h5>订单数量：{{statisticsData.notEnteredRecordedAmountDto.total}}</h5>
          </div>
        </div>
      </a-card>
      <a-card>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :pagination="pagination"
          @change="handleChangeTable"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'orderState'">
              <a>
                {{ orderStateEnum.getNameByValue(record.orderState) }}
              </a>
            </template>
            <template v-if="column.key === 'shopInState'">
              <a>
                {{ record.shopInState == 1 ? "未入账" : "已入账" }}
              </a>
            </template>
            <template v-if="column.key === 'payType'">
              <a>
                {{ record.payType == 1 ? "微信支付" : "苹果支付" }}
              </a>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button @click="handleSee(record.id)" type="primary">查看订单</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <goodsOrderInfo ref="goodsOrderInfoRef"></goodsOrderInfo>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { columns } from "./columns.js";
import goodsOrderInfo from "../orderManage/goodsOrderModule/goodsOrderInfo.vue";
import orderStateEnum from "@/enums/orderStateEnum.js";
import { exporeFile } from "@/utils/exporeFile";
import {
  queryTransactionHistory,
  queryTradingStatistics,
  exportTransactionHistory,
} from "@/api/income";
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal:total => `共 ${total} 条`
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  goodName: undefined,
  goodSku: undefined,
  orderNo: undefined,
  orderState: undefined,
  shopInState: undefined,
  startTime: undefined,
  endTime: undefined,
});
const dateTime = ref(null);
const dataSource = ref([]);
function onChangeTime(date, dateInfo) {
  dateTime.value = date;
  formState.value.startTime = dateInfo[0];
  formState.value.endTime = dateInfo[1];
}

// 查询
function handleSearch() {
  init();
}
const goodsOrderInfoRef = ref(null);
function handleSee(id) {
  goodsOrderInfoRef.value.seeFunc(id);
}
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    goodName: undefined,
    goodSku: undefined,
    orderNo: undefined,
    orderState: undefined,
    shopInState: undefined,
    startTime: undefined,
    endTime: undefined,
  };
  init();
}
const handleExport = async () => {
  const data = await exportTransactionHistory(formState.value);
  exporeFile("交易记录列表.xls", data);
};
const statisticsData = ref({})
const queryTradingStatisticsData = async () => {
  const data = await queryTradingStatistics(formState.value);
  console.log(data);
  if(data.code == 200) {
    statisticsData.value = data.data
  }
};
const queryTransactionHistoryList = async () => {
  const data = await queryTransactionHistory(formState.value);
  if (data.code === 200) {
    dataSource.value = data.data.list;
    pagination.value.total = data.data.total;
  }
};
const init = () => {
  queryTradingStatisticsData();
  queryTransactionHistoryList();
};
// 分页
const handleChangeTable = (pagina) => {
  pagination.value = {...pagination.value,...pagina};
  formState.value.page = pagina.current;
  formState.value.pageSize = pagina.pageSize;
  queryTransactionHistoryList();
}
onMounted(() => {
  init();
});
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.card-content {
  padding: 24px;
  div {
    border-left: 1px solid #e8ecf0;
    padding: 0 46px;
    h3 {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #262e47;
      line-height: 14px;
    }
    h4 {
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262e47;
      line-height: 19px;
    }
    h5 {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #262e47;
      line-height: 14px;
    }
  }
  div:first-child {
    padding-left: 0;
    border-left: 0;
  }
}
</style>
